﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ZRender</title>
    <!--Step:1 Import a module loader, such as esl.js or require.js-->
    <!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
    <script src="js/esl.js"></script>
</head>

<body>
    <!--Step:2 Prepare a dom for ZRender which (must) has size (width & hight)-->
    <!--Step:2 为ZRender准备一个具备大小（宽高）的Dom-->
    <div id="main" style="width:100%;height:500px;border:1px solid #ccc"></div>
    
    <script type="text/javascript">
    // Step:3 conifg ZRender's path, link to zrender.js from current page.
    // Step:3 为模块加载器配置zrender的路径，从当前页面链接到zrender.js
    require.config({
        paths:{ 
            zrender:'./js/zrender',
            'zrender/shape/Circle' : './js/zrender'
        }
    });
    
    // Step:4 require zrender and use it in the callback.
    // Step:4 动态加载zrender然后在回调函数中开始使用
    require(
        ['zrender','zrender/shape/Circle'],
        function(zrender) {
            var zr = zrender.init(document.getElementById('main'));
            var color = require('zrender/tool/color');
            var colorIdx = 0;
            var width = Math.ceil(zr.getWidth());
            var height = Math.ceil(zr.getHeight());

            var i;
            var n = document.createElement('canvas').getContext ? 150 : 50;
            var shapeList = [];
            // 动画元素
            var CircleShape = require('zrender/shape/Circle');
            var guid = require('zrender/tool/guid');
            for(i = 0; i < n; i++) {
                shapeList[i] = new CircleShape({
                    id : guid(),
                    style : {
                        x : Math.ceil(Math.random() * width),
                        y : Math.ceil(Math.random() * height),
                        r : Math.ceil(Math.random() * 40),
                        brushType : Math.ceil(Math.random() * 100) % 3 >= 1 ? 'both' : 'stroke',
                        color : 'rgba('
                                + Math.round(Math.random() * 256) + ','
                                + Math.round(Math.random() * 256) + ','
                                + Math.round(Math.random() * 256) + ', 0.5)',
                        strokeColor : 'rgba('
                                + Math.round(Math.random() * 256) + ','
                                + Math.round(Math.random() * 256) + ','
                                + Math.round(Math.random() * 256) + ', 0.3)',
                        lineWidth : 3
                    },
                    _animationX : Math.ceil(Math.random() * 20),
                    _animationY : Math.ceil(Math.random() * 20),
                    hoverable : false
                });
                if (shapeList[i].style.x < 100 || shapeList[i].style.x > (width - 100)) {
                    shapeList[i].style.x = width / 2;
                }
                if (shapeList[i].style.y < 100 || shapeList[i].style.y > (height - 100)) {
                    shapeList[i].style.y = height / 2;
                }
                zr.addShape(shapeList[i]);
            }

            // 绘画，利用render的callback可以在绘画完成后马上开始动画
            zr.render(function(){
                animationTicket = setInterval(
                    function(){
                        var style;
                        for( i = 0; i < n; i++) {
                            // 可以跳过
                            style = shapeList[i].style;
                            if (style.brushType == 'both') {
                                if (style.x + style.r + shapeList[i]._animationX >= width
                                    || style.x - style.r + shapeList[i]._animationX <= 0
                                ){
                                    shapeList[i]._animationX = -shapeList[i]._animationX;
                                }
                                shapeList[i].style.x += shapeList[i]._animationX;
                            }

                            if (style.brushType == 'both') {
                                if (style.y + style.r + shapeList[i]._animationY >= height ||
                                    style.y - style.r + shapeList[i]._animationY <= 0){
                                    shapeList[i]._animationY = -shapeList[i]._animationY;
                                }
                                shapeList[i].style.y += shapeList[i]._animationY;
                            }
                            else {
                                if (style.y - shapeList[i]._animationY + style.r <= 0){
                                    shapeList[i].style.y = height + style.r;
                                    shapeList[i].style.x = Math.ceil(Math.random() * width);
                                }
                                shapeList[i].style.y -= shapeList[i]._animationY;
                            }
                            // 就看这句就行
                            zr.modShape(shapeList[i].id, shapeList[i]);
                        }
                        zr.refresh();
                    },
                    50
                )
            });
        }
    )
    </script>
</body>
</html>